<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Grid Complex Columns</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../dojo/resources/dojo.css";
			@import "../css/skins/claro.css";
			@import "../css/dgrid.css"; /* this ensures that are rules come after dgrid.css */
			.heading {
				font-weight: bold;
				padding-bottom: 0.25em;
			}
			.grid { 
				width: 700px;
			}
			.grid .dgrid-column-set-0 { 
				width: 50%;
			}
			.grid .field-col1 {
				width: 200px;
			}
			.grid .field-col2 {
				width: 100px;
			}
			.grid .field-col4 {
				width: 500px;
			}
			.ui-widget{
				margin: 10px;
			}
			.dgrid-sort-arrow {
				float: left;
			}
		</style>

		<script src="../../dojo/dojo.js" 
			data-dojo-config="async: true"></script>
		<script>
			require(["dgrid/OnDemandGrid", "dgrid/GridWithColumnSetsFromHtml", "dgrid/ColumnSet", "dgrid/Selection", "dgrid/Keyboard", "dojo/_base/declare", "dojo/on", "dojo/parser", "dgrid/test/data/base", "dgrid/test/data/DeferredWrapper", "dojo/domReady!"],
				function(OnDemandGrid, GridFromHtml, ColumnSet, Selection, Keyboard, declare, on, parser, testStore, DeferredWrapper){
					var columnSets1 = [
							[
								[{label: 'Column 1', field: 'col1'},
										{label: 'Column 2', field: 'col2', sortable: false}],
									[{label: 'Column 3', field: 'col3', colSpan: 2}]],
							[
								[{label: 'Column 1', field: 'col1', rowSpan: 2},
									{label: 'Column 4', field: 'col4'}],
									[{label: 'Column 5', field: 'col5'}]
							]],
						columnSets2 = [
							[
								[{label: 'Column 1', field: 'col1'},
									{label: 'Column 3', field: 'col3', rowSpan: 2}],
								[{label: 'Column 2', field: 'col2', sortable: false}]],
							[
								[{label: 'Column 1', field: 'col1', colSpan: 2}],
								[{label: 'Column 4', field: 'col4'},
									{label: 'Column 5', field: 'col5'}]
							]],
						columnSets3 = [
							[
								[{label: 'Column 1', field: 'col1'},
										{label: 'Column 2', field: 'col2', sortable: false}],
									[{label: 'Column 3', field: 'col3', colSpan: 2}]],
							[[{label: 'Column 1', field: 'col1', rowSpan: 2}]],
							[
								[{label: 'Column 4', field: 'col4'}],
									[{label: 'Column 5', field: 'col5'}]
							]],
						// same structures as above, without being split into ColumnSets
						subRows1 = [
							[
								{label: 'Column 1', field: 'col1'},
								{label: 'Column 2', field: 'col2', sortable: false},
								{label: 'Column 1', field: 'col1', rowSpan: 2},
								{label: 'Column 4', field: 'col4'}
							], [
								{label: 'Column 3', field: 'col3', colSpan: 2},
								{label: 'Column 5', field: 'col5'}
							]],
						subRows2 = [
							[
								{label: 'Column 1', field: 'col1'},
								{label: 'Column 3', field: 'col3', rowSpan: 2},
								{label: 'Column 1', field: 'col1', colSpan: 2}
							], [
								{label: 'Column 2', field: 'col2', sortable: false},
								{label: 'Column 4', field: 'col4'},
								{label: 'Column 5', field: 'col5'}
							]],
						columnSetsSingleRow = [
							[
								[
									{label: 'Column 1', field: 'col1'},
									{label: 'Column 2', field: 'col2', sortable: false}
								]
							], [
								[
									{label: 'Column 1', field: 'col1'},
									{label: 'Column 4', field: 'col4'}
								]
							]];
					
					function byId(id){ return document.getElementById(id); }

					var ComplexGrid = declare([OnDemandGrid, ColumnSet, Selection, Keyboard]);

					window.gridNoColumnSets = new (declare([OnDemandGrid, Selection, Keyboard]))({
						store: DeferredWrapper(testStore),
						subRows: subRows1
					}, "gridNoColumnSets");
					
					window.gridSingleRow = new ComplexGrid({
						store: DeferredWrapper(testStore),
						columnSets: columnSetsSingleRow
					}, "gridSingleRow");
					
					window.grid = new ComplexGrid({
						store: DeferredWrapper(testStore),
						columnSets: columnSets1
					}, "grid");
					
					// hook up buttons for testing setSubRows / setColumnSets
					on(byId("btnSubRows1"), "click", function(){
						gridNoColumnSets.set("subRows", subRows1);
					});
					on(byId("btnSubRows2"), "click", function(){
						gridNoColumnSets.set("subRows", subRows2);
					});
					
					on(byId("btnColumnSets1"), "click", function(){
						grid.set("columnSets", columnSets1);
					});
					on(byId("btnColumnSets2"), "click", function(){
						grid.set("columnSets", columnSets2);
					});
					on(byId("btnColumnSets3"), "click", function(){
						grid.set("columnSets", columnSets3);
					});

					var HtmlGrid = declare([OnDemandGrid, GridFromHtml, Selection, Keyboard]);

					window.gridFromHtml = new HtmlGrid({
						store: DeferredWrapper(testStore)
					}, "gridFromHtml");
					window.gridFromHtml2 = new HtmlGrid({
						store: testStore
					}, "gridFromHtml2");
					
					// test declarative instantiation (need a global for parser)
					window.dgrid = { GridFromHtml: HtmlGrid };
					parser.parse();
				});
		</script>
	</head>
	<body class="claro">
		<h2>A Grid with subrows (no ColumnSets)</h2>
		<div id="gridNoColumnSets" class="grid"></div>
		<p>Buttons to test resetting subRows:
			<button id="btnSubRows1">set 1</button>
			<button id="btnSubRows2">set 2</button>
		</p>
		<h2>A Grid with locking columns but only one subrow</h2>
		<div id="gridSingleRow" class="grid"></div>
		<h2>A Grid with complex columns including locking columns and subrows</h2>
		<div id="grid" class="grid"></div>
		<p>Buttons to test resetting columnSets:
			<button id="btnColumnSets1">set 1</button>
			<button id="btnColumnSets2">set 2</button>
			<button id="btnColumnSets3">set 3</button>
		</p>
		<p>(set 3 tests 3 columnsets, to test proper cleanup of scrollers when
			going back to 2)</p>
		<h2>Same grid, instantiated programmatically from HTML table</h2>
		<table id="gridFromHtml" class="grid">
			<colgroup span="2"></colgroup>
			<colgroup span="2"></colgroup>
			<thead>
				<tr>
					<th data-dgrid-column="{field:'col1'}">Column 1</th>
					<th data-dgrid-column="{field:'col2', sortable:false}">Column 2</th>
					<th rowspan="2" data-dgrid-column="{field:'col1'}">Column 1</th>
					<th data-dgrid-column="{field:'col4'}">Column 4</th>
				</tr>
				<tr>
					<th colspan="2" data-dgrid-column="{field:'col3'}">Column 3</th>
					<th data-dgrid-column="{field:'col5'}">Column 5</th>
				</tr>
			</thead>
		</table>
		<h2>Another complex grid instantiated from an HTML table</h2>
		<table id="gridFromHtml2">
			<colgroup span="3"></colgroup>
			<colgroup span="4"></colgroup>
			<thead>
				<tr>
					<th rowspan="3" data-dgrid-column="{field:'col1'}">rowspan=3</th>
					<th colspan="2" data-dgrid-column="{field:'col2'}">colspan=2</th>
					<th rowspan="2" data-dgrid-column="{field:'col3'}">rowspan=2</th>
					<th colspan="2" data-dgrid-column="{field:'col4'}">colspan=2</th>
					<th rowspan="2" data-dgrid-column="{field:'col5'}">rowspan=2</th>
				</tr>
				<tr>
					<th rowspan="2" data-dgrid-column="{field:'col2'}">rowspan=2</th>
					<th data-dgrid-column="{field:'col3'}">Column 3</th>
					<th rowspan="2" data-dgrid-column="{field:'col4'}">rowspan=2</th>
					<th data-dgrid-column="{field:'col5'}">Column 5</th>
				</tr>
				<tr>
					<th data-dgrid-column="{field:'col2'}">Column 2</th>
					<th data-dgrid-column="{field:'col3'}">Column 3</th>
					<th colspan="2" data-dgrid-column="{field:'col5'}">colspan=2</th>
				</tr>
			</thead>
		</table>
		<hr>
		<h2>Same as previous two tables, instantiated declaratively</h2>
		<table id="gridFromHtmlDecl" class="grid" data-dojo-type="dgrid.GridFromHtml"
			data-dojo-props="store:testStore">
			<colgroup span="2"></colgroup>
			<colgroup span="2"></colgroup>
			<thead>
				<tr>
					<th data-dgrid-column="{field:'col1'}">Column 1</th>
					<th data-dgrid-column="{field:'col2', sortable:false}">Column 2</th>
					<th rowspan="2" data-dgrid-column="{field:'col1'}">Column 1</th>
					<th data-dgrid-column="{field:'col4'}">Column 4</th>
				</tr>
				<tr>
					<th colspan="2" data-dgrid-column="{field:'col3'}">Column 3</th>
					<th data-dgrid-column="{field:'col5'}">Column 5</th>
				</tr>
			</thead>
		</table>
		<table id="gridFromHtmlDecl2" data-dojo-type="dgrid.GridFromHtml"
			data-dojo-props="store:testStore">
			<colgroup span="3"></colgroup>
			<colgroup span="4"></colgroup>
			<thead>
				<tr>
					<th rowspan="3" data-dgrid-column="{field:'col1'}">rowspan=3</th>
					<th colspan="2" data-dgrid-column="{field:'col2'}">colspan=2</th>
					<th rowspan="2" data-dgrid-column="{field:'col3'}">rowspan=2</th>
					<th data-dgrid-column="{field:'col4', colSpan:2}">colSpan:2</th>
					<th data-dgrid-column="{field:'col5', rowSpan:2}">rowSpan:2</th>
				</tr>
				<tr>
					<th rowspan="2" data-dgrid-column="{field:'col2'}">rowspan=2</th>
					<th data-dgrid-column="{field:'col3'}">Column 3</th>
					<th rowspan="2" data-dgrid-column="{field:'col4'}">rowspan=2</th>
					<th data-dgrid-column="{field:'col5'}">Column 5</th>
				</tr>
				<tr>
					<th data-dgrid-column="{field:'col2'}">Column 2</th>
					<th data-dgrid-column="{field:'col3'}">Column 3</th>
					<th colspan="2" data-dgrid-column="{field:'col5'}">colspan=2</th>
				</tr>
			</thead>
		</table>
	</body>
</html>
